<template>
    <div class="my">
       <div class="myheader">
            <div class="avartar">
                <img src="./../assets/imgs/icon/user@default.png" alt="">
            </div>
            <div class="username">
                <p>{{name}}</p>
            </div>
       </div>
       <cube-button :light="true" @click="logins" v-show="this.userId==''?this.logs:''">登录</cube-button>
       <cube-button :light="true" @click="exits" v-show="this.userId!=''?this.logs:''">退出登录</cube-button>
    </div>
</template>

<script>
export default {
    name:"my",
    data(){
        return {
            name:this.$store.state.username,
            userId:this.$store.state.userId,
            logs:true
        }
    },
    mounted(){

    },
    methods:{
        logins(){
            this.$router.push({path:'/login'});
        },
        exits(){
            localStorage.removeItem('username');
            localStorage.removeItem('userId');
            this.name = '';
            this.userId = '';

        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
    .my{
        .myheader{
            height: 150px;
            width:100%;
            background: $colorA;
            margin-bottom: 5px;
            .avartar{
                display: flex;
                justify-content:center;
                img{
                    height: 60px;
                    width:60px;
                    display: block;
                    overflow: hidden;
                    border-radius: 50%;
                }
            }
            .username{
                p{
                    display: flex;
                    justify-content: center;
                    font-size: 16px;
                    color:$colorG;
                    padding-top:10px;
                }
            }
        }
    }
</style>

